<template>
  <div class="left-bar">
    <ul>
      <li
        v-for="(item, index) in articles"
        :key="item.aid"
        @click="active(index, item.aid)"
        :class="{ active: index === activeIndex }"
      >
        {{ item.title }}
      </li>
    </ul>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref, watch } from "@vue/runtime-core";

export default defineComponent({
  props: ["articles"],
  setup(props, context) {
    const activeIndex = ref<number>(0);
    const flag = ref<boolean>(true);

    function active(index: number, aid: number) {
      if (activeIndex.value !== index) {
        activeIndex.value = index;
        context.emit("article-id", aid);
      }
    }

    watch(
      props.articles,
      (val) => {
        if (val[0]) {
          if (flag.value) {
            context.emit("article-id", val[0].aid);
            flag.value = false;
          } else {
            if (activeIndex.value > 0) {
              activeIndex.value -= 1;
              console.log("-1");
            } else {
              activeIndex.value = 0;
            }
            context.emit("article-id", val[activeIndex.value].aid);
          }
        }
      },
      { immediate: true, deep: true }
    );

    return {
      active,
      activeIndex,
    };
  },
});
</script>
<style lang="scss" scoped>
::-webkit-scrollbar {
  width: 5px;
}
::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: #949191;
}
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: rgb(71, 71, 71);
}
.left-bar {
  position: absolute;
  top: 0;
  left: 0;
  padding-right: 1px;
  width: 200px;
  height: 100%;
  overflow-y: auto;
  background-color: rgb(236, 236, 236);
  ul {
    margin: 0;
    padding: 0;
    li {
      height: 40px;
      list-style: none;
      line-height: 40px;
      padding-left: 10px;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      background-color: #fff;
      transition: all 0.1s linear;
      &:not(.active):hover {
        background-color: rgb(223, 223, 223);
        box-shadow: inset 0px 0px 3px 3px rgb(196, 196, 196);
      }
    }
    li + li {
      border-top: 1px rgb(207, 207, 207) solid;
    }
    .active {
      background-color: rgb(85, 85, 85);
      color: #fff;
    }
  }
}
</style>
